<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>가입폼</title>
<script type="text/javascript">
var flag = true;//id 중복관련 전송여부 (true : 전송불가, false : 전송)
function formCheck(){
	var form = window.document.f1;
	if(!form.id.value){
		alert("아이디를 넣으세요");
		form.id.focus();
		return false;
	}
	if(flag){
		alert("사용할 수 없는 ID 입니다. ");
		form.id.focus();
		return false;
	}
	if(!form.password.value){
		alert("패스워드를 넣으세요");
		form.password.focus();
		return false;
	}
	if(!form.name.value){
		alert("이름을 넣으세요");
		form.name.focus();
		return false;
	}
	if(!form.registerNumber1.value){
		alert("주민번호 앞자리를 넣으세요");
		form.registerNumber1.focus();
		return false;
	}
	if(!form.registerNumber2.value){
		alert("주민번호 뒷자리를 넣으세요");
		form.registerNumber2.focus();
		return false;
	}
}
var xhr;

function idCheck(){
	//innerHTML을 이용해 span에 html 입력
	var spanTg = document.getElementById("id_msg");
	var idTF = document.getElementById("id");
	if(idTF.value.length<4){
		spanTg.innerHTML ="<font size='2' color='gray'>ID는 4글자 이상넣으세요</font>";
	}else{
		//1. xhr 생성
		if(window.ActiveXObject){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}else{
			xhr = new XMLHttpRequest();
		}
		//2. callback 함수 등록
		xhr.onreadystatechange=checkId;
		//3. open
		xhr.open("POST", "/MemberManagerFC_ibatis_inst/controller", true);
		//4. Header설정
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		//5. 요청파라미터
		var queryStr = "command=checkIdDuplicate&id="+document.getElementById("id").value;
		//6. send()
		xhr.send(queryStr);		
	}
	//callback 함수
	function checkId(){
		//응답이 끝났으면
		if(xhr.readyState==4){
			if(xhr.status==200){
				var txt = xhr.responseText;
				flag = eval(txt);
				if(flag){//아이디 중복
					document.getElementById("id_msg").innerHTML = "<font size='2' color='gray'>중복된 아이디로 사용할 수 없습니다.</font>";
				}else{
					document.getElementById("id_msg").innerHTML = "<font size='2' color='gray'>사용할 수 있는 아이디 입니다.</font>";
				}
			}else{
				alert("처리 도중 오류 발생 : "+xhr.status);
			}
		}
	}
}
</script>
</head>
<body>
<h2>가입양식</h2>
<form method="post" action="/MemberManagerFC_ibatis_inst/forward.jsp" 
		onsubmit="return formCheck()" name="f1">
<input type="hidden" name="command" value="joinMember">
	<table width='500'>
		<tr>
			<td width="100">ID</td>
			<td>
				<input type="text" name="id" id="id"  onkeyup="idCheck();">
				 <span id='id_msg'></span>
			</td>
		</tr>
		<tr>
			<td>Password</td>
			<td>
				<input type="password" name="password">
			</td>
		</tr>
		<tr>
			<td>이름</td>
			<td>
				<input type="text" name="name">
			</td>
		</tr>
		<tr>
			<td>주민번호</td>
			<td>
				<input type="text" name="registerNumber1" maxlength="6">-
				<input type="text" name="registerNumber2" maxlength="7">
			</td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<input type="submit" value="가입">
				<input type="reset" value="다시작성">
			</td>
		</tr>
	</table>
</form>
</body>
</html>